﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ODailyReport_GetMachineTaskTime4_GroupBySerialNumberHighcharts.aspx.cs" Inherits="IHISCETeim.Web.MachineSys.MacModel.ODailyReport_GetMachineTaskTime4_GroupBySerialNumberHighcharts" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style type="text/css">
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, font, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td { padding:0; margin:0; font-size:12px; line-height:100%; font-family:Arial, sans-serif;}
        table{}
        .table{ border:1px solid #000; border-collapse:collapse;}
        .table th{ text-align:center; line-height:25px;border:1px solid #000;}
        .table td{ text-align:left; line-height:16px;border:1px solid #000;}
    </style>
    <script src="../js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../Highcharts/js/highcharts.js"></script>
    <script type="text/javascript" src="../Highcharts/js/themes/grid.js"></script>
    <script type="text/javascript">
        // On document ready, call visualize on the datatable.
        $(document).ready(function () {
            /**
            * Visualize an HTML table using Highcharts. The top (horizontal) header
            * is used for series names, and the left (vertical) header is used
            * for category names. This function is based on jQuery.
            * @param {Object} table The reference to the HTML table to visualize
            * @param {Object} options Highcharts options
            */
            Highcharts.visualize = function (table, options) {
                // the categories
                options.xAxis.categories = [];
                $('tbody th', table).each(function (i) {
                    options.xAxis.categories.push(this.innerHTML);
                });

                // the data series
                options.series = [];
                $('tr', table).each(function (i) {
                    var tr = this;
                    $('th, td', tr).each(function (j) {
                        if (j > 0) { // skip first column
                            if (i == 0) { // get the name and init the series
                                options.series[j - 1] = {
                                    name: this.innerHTML,
                                    data: []
                                };
                            } else { // add values
                                options.series[j - 1].data.push(parseFloat(this.innerHTML));
                            }
                        }
                    });
                });

                var chart = new Highcharts.Chart(options);
            }

            var table = document.getElementById('datatable'),
	        options = {
	            chart: {
	                renderTo: 'container',
	                type: 'column'
	            },
	            title: {
	                text: '<%=ReportTitle %>'
	            },
	            xAxis: {
			    labels: {
				    rotation: -55,
				    align: 'right',
				    style: {
					    font: 'normal 13px Verdana, sans-serif'
				    }
                    }
	        },
	        yAxis: {
	            title: {
	                text: '小时'
	            }
	        },
            legend: {
                enabled :false
            },
	        tooltip: {
	            formatter: function () {
	                var dataKey = 'GongWei' + this.x;
	                var html = jQuery.data(document.body, dataKey);
	                if (html == undefined) {
	                    //ajax获取工位所耗时间明细
	                    html = $.ajax({
	                        url: "ODailyReport_GetMachineTaskTime4_GroupBySerialNumberHighcharts.aspx?ajaxmethond=getgongweiinfo&SerialNumber=<%=SerialNumber %>&GongWei=" + this.x + "&hours=" + this.y,
	                        async: false
	                    }).responseText;
	                    jQuery.data(document.body, dataKey, html);
	                } 
	                return html;
	            }
	        },
	        plotOptions: {
	            column: {
	                dataLabels: {
	                    enabled: true,
				        formatter: function() {
					        return this.y;
				        },
				        style: {
					        font: 'normal 12px Verdana, sans-serif'
				        }

	                }
	            }
	        }
	    };
            Highcharts.visualize(table, options);
        });

		</script>
</head>
<body>
    <form id="form1" runat="server">
    
    <table align="center">
     <tr>
     <td valign="top">
        <div id="container" style="width: 520px; height: 700px;margin: 0 auto"></div>
     </td>
     <td  valign="top">
        <asp:repeater id="rpMachineTaskTimeChart4" runat="server">
        <HeaderTemplate>
            <table class="table" id="datatable" style=" display:none;" >
            <thead>
                <tr  >  
                    <th width="80" align="center">
                        工位
                    </th>
                    <th width="80">
                        总工时
                    </th>
                    
                </tr>
            </thead>
            <tbody>
         </HeaderTemplate>
         <ItemTemplate>
                <tr target="sid_user" >			
				    <th><%# Eval("GongWei")%></th>
				    <td><%# Convert.ToDecimal( Eval("TaskTime")).ToString("f2")%></td>
                    
			    </tr>
         </ItemTemplate>
         <FooterTemplate>
                </tbody>
             </table>
         </FooterTemplate>
        </asp:repeater>

        <asp:repeater id="rpMachineTaskTimeChart4Show" runat="server">
        <HeaderTemplate>
            <table class="table"  >
            <thead>
                <tr  >  
                    <td width="60" align="center">
                        工位
                    </td>
                    <td width="60">
                        总工时
                    </td>
                    <td width="70">名称</td>
                </tr>
            </thead>
            <tbody>
         </HeaderTemplate>
         <ItemTemplate>
                <tr target="sid_user" >			
				    <td><%# Eval("GongWei")%></td>
				    <td><%# Convert.ToDecimal( Eval("TaskTime")).ToString("f2")%></td>
                    <td><%# IHISCETeim.Web.IHISCETeimDict.GetGongWeiValue(Eval("GongWei").ToString())%></td>
			    </tr>
         </ItemTemplate>
         <FooterTemplate>
                </tbody>
             </table>
         </FooterTemplate>
        </asp:repeater>
    </td>
    </tr>
    </table>
    
    </form>
</body>
</html>
